<template>
	<view class="container">
		<view class="background-color" :style="'background:' + mobile_head_color">
			<view class="topbox">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
					<view class="info-box">
						<view class="name">{{listdata.owner_name}}</view>
						<view class="tips">业主</view>
					</view>
					<view class="lookRegistration" @tap="govisitor">查看访客记录</view>
				</view>
				<view class="phone">{{listdata.owner_phone}}</view>
				<view class="address-box">
					<view class="address-icon">
						<image src="../../../static/images/address.png" class="address-img"></image>
					</view>
					<view class="address-text" v-if="listdata.address">{{listdata.address}}</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="dataList[0]" v-for="(item,index) in dataList" :key="index">
			<view class="relative-top">
				<view class="relative-box">
					<view class="relative">{{item.visitor_name}}</view>
					<view class="relative-tips">{{item.visitor_type_desc}}</view>
				</view>
				<button type="primary" class="btn" @tap="gopass(item.id)" :style="'background-color:' + actcolor + ';-webkit-box-shadow:0rpx 4rpx 16rpx #b1b1b1;box-shadow:0rpx 4rpx 16rpx #b1b1b1;'">确认通行</button>
			</view>
			<view class="center-phone">{{item.visitor_phone}}<text class="text">{{item.statusDesc}}</text></view>
			<view class="center-phone">来访时间：{{item.add_time}}</view>
		</view>
		<div class='tip_box_no_data' v-if="!dataList[0]">
			<image class="no_data_img" src="https://hf.pigcms.com/static/images/house/no_data.png"></image>
			<div class='no_tip_content'>
				<lang keywords="暂无内容~"></lang>
			</div>
		</div>
		<view class="independent_payment" @tap="goaddRegistration">
			<image src="../../../static/images/addexpress.png" class="independent-img"></image>
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getvisitorList = () => {
		common.post('HouseApi&a=visitor_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			page: 1,
		}, data => {
			console.log('++++', data)
			_this.listdata = data;
			_this.dataList = data.dataList;
		});
	};
	const getconfirmPass = () => {
		common.post('HouseApi&a=chk_visitor_info', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			console.log('++++', data)
			getvisitorList();
			uni.navigateTo({
				url:'/pages/village/my/visitorRegistrationlist'
			})
		});
	};
	
	export default {
		data() {
			return {
				listdata: {},
				dataList:[],
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				mobile_head_color: '',
				id:0,
				isFirstLoad:true,
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
			if(_this.isFirstLoad == false){
				getvisitorList();
			}
		},
		onLoad(options) {
			_this = this;
			_this.id = options.id;
			_this.money = options.money;
			_this.price = options.price;
			// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.mobile_head_color = config.config.mobile_head_color
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getvisitorList()
				_this.isFirstLoad = false;
			});
		},
		methods: {
			govisitor(){
				uni.navigateTo({
					url:'/pages/village/my/visitorRegistrationlist'
				})
			},
			goaddRegistration(){
				uni.navigateTo({
					url:'/pages/village/my/addvisitor'
				})
			},
			gopass(id){
				_this.id = id
				console.log("22222222",_this.id)
				getconfirmPass()
			},
		},
		components: {
			
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}
	.topbox {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		background: url(../../../static/images/visitor-bg1.png);
		background-position-x: 500rpx;
		background-position-y: 70rpx;
		background-repeat: no-repeat;
		background-size: 30%;
	}
	.info-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.name {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}
	.tips {
		background-color: #ffa112;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #ffffff;
		padding: 2rpx 10rpx;
		margin-left: 15rpx;
	}
	.phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.address-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-top: 20rpx;
	}
	.address-icon {
		width: 25rpx;
		height: 30rpx;
		margin-right:8rpx;
	}
	.address-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.address-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.card {
		background-color: #ffffff;
		box-shadow: 0px 2rpx 22rpx 4rpx rgba(227, 227, 227, 0.48);
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 40rpx;
	}
	.relative-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.relative-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.relative {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-right: 10rpx;
	}
	.relative-tips {
		border-radius: 10rpx;
		border: solid 2rpx #2681f3;
		font-size: 22rpx;
		font-weight: normal;
		font-stretch: normal;
		text-align: center;
		letter-spacing: 0rpx;
		color: #2681f3;
		padding: 0rpx 10rpx;
	}
	.btn {
		background-color: #2681f3;
		border-radius: 26rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		margin: 0;
	}
	.center-phone {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 45rpx;
		letter-spacing: 0rpx;
		color: #7b7b7b;
	}
	.text {
		color: #ffa112;
		padding-left: 10rpx;
	}
	.independent_payment {
		position: fixed;
		bottom: 165rpx;
		right: 24rpx;
		width: 102rpx;
		height: 102rpx;
	}
	.independent-img {
		width: 100%;
		height: 100%;
		border-radius: 102rpx;
		display: block;
	}
	.tip_box_no_data {
		padding-top: 200rpx;
		font-size: 28rpx;
		text-align: center;
	}
	.lookRegistration{
		padding: 5rpx 15rpx;
		border-radius: 30rpx;
		color: #FFFFFF;
		background-color: rgba(227, 232, 227, 0.5);
	}
	
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
</style>
